<template>
    <div class="main-login">
        <lyz-layout
                :pagination="pagination"
                :label="label"
                @handleSizeChange="handleSizeChange"
                @handleCurrentChange="handleCurrentChange">
            <div slot="banner" class="top-right">
                <el-button type="primary" size="small" @click="createServer" slot="reference">新增</el-button> &nbsp;
                <el-input placeholder="请输入角色id" v-model="roleId" clearable></el-input>
                <el-input placeholder="请输入角色分组" v-model="roleGroup" clearable></el-input>
                <el-button slot="append" icon="el-icon-search" @click="queryList"></el-button>
                <el-button type="danger" size="small" @click="batchRemove" slot="reference">批量删除</el-button> &nbsp;

            </div>
            <div slot="main" class="main-body">
                <el-table
                        :data="tableData"
                        stripe
                        v-loading="loginLoading"
                        tooltip-effect="light"
                        height="100%"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column
                            v-for="(data,index) in tableHeader"
                            :show-overflow-tooltip="true"
                            :key="index"
                            :prop="data.prop"
                            :label="data.label"
                            :min-width="data['min-width']"
                            :align="data.align">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            min-width="120">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini"
                                       @click="updateUser(scope.row)">修改
                            </el-button>
                            <el-button type="text" size="mini" class="danger-text"
                                       @click="deleteServer(scope.row.id)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

        </lyz-layout>
        <el-dialog :visible.sync="messageVisible" width="33%" center
                   class="user-dialog">
            <el-form :model="messageForm" :label-width="messageLabelWidth" ref="messageForm"
                     :validate-on-rule-change=false>
                <el-form-item v-if="idtest!==''" label="ID">
                    <el-input :disabled="true"  v-model="messageForm.id"></el-input>
                   </el-form-item>
                <el-form-item label="角色Id">
                    <el-input v-model="messageForm.roleId" placeholder="请输入角色Id"></el-input>
               </el-form-item>
               <el-form-item label="角色描述">
                    <el-input v-model="messageForm.roleDesc" placeholder="请输入角色描述"></el-input>
               </el-form-item>
               <el-form-item label="角色分组">
                   <el-input v-model="messageForm.roleGroup" placeholder="请输入角色分组"></el-input>
               </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="messageVisible = false">取 消</el-button>
                <el-button type="primary" @click=saveServer>确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import lyzLayout from '@/components/lyzLayout';
    import manage from '../manage.component';
    import {formatDateTime, responseText, debounce} from '../../../config/utils.js';

    export default {
        name: "server",
        data() {
            return {
                roleId: '',
                roleGroup: '',
                pagination: {
                    pageIndex: 1,
                    pageSize: 10,
                    total: 0,
                },
                label: '服务器信息管理',
                messageForm: {},
                messageVisible: false,
                messageLabelWidth: '90px',
                operate: '',
                idtest:'',
                multipleSelection: [],//多选的数据
                tableData: [],
                loginLoading: false,
                tableHeader: [
                    {
                        prop: 'id',
                        label: 'ID',
                        'min-width': 40,
                        align: 'center',
                    },
                    {
                        prop: 'roleId',
                        label: '角色ID',
                        'min-width': 80,
                        align: 'center',
                    },
                    {
                        prop: 'roleDesc',
                        label: '角色描述',
                        'min-width': 120,
                        align: 'center',
                    },
                    {
                        prop: 'roleGroup',
                        label: '角色分组',
                        'min-width': 100,
                        align: 'center',
                    },
                    {
                        prop: 'applyTime',
                        label: '申请时间',
                        'min-width': 120,
                        align: 'center',
                    },

                ]
            };
        },
        components: {
            lyzLayout,
        },
        mixins: [manage],
        created() {
            this.queryList();
        },
        mounted() {
            this.$watch('queryKeyword', debounce(() => {
                this.pagination.pageIndex = 1;
                this.queryList();
            }, 1000));
        },
        methods: {
            queryTypeChange(val) {
                if (val !== '') {
                    this.queryType = val;
                    this.queryList();
                }
            },
            queryList() {
                this.loginLoading = true;
                let params = {
                    roleId: this.roleId,
                    roleGroup: this.roleGroup,
                    pageNo: this.pagination.pageIndex,
                    pageSize: this.pagination.pageSize
                };
                this.$http.get('/role/paging', {params: params}).then(({body}) => {
                    if (body.success === true) {

                        this.tableData = responseText(body.data.records);
                        this.pagination.total = body.data.records ? body.data.total : 0;
                    } else {
                        this.$message.error(body.message);
                    }
                }).finally(() => {
                    this.loginLoading = false;
                })
            },

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            batchRemove() {
                let ids = '';
                this.multipleSelection.forEach(selectedItem => {
                    // 删除请求
                    ids += selectedItem.id + ',';
                });
                let params = {
                    ids: ids
                };
                this.$http.post("/role/batchRemove", {}, {params: params}).then(({body}) => {
                    if (body.success === true) {
                        this.queryList();
                        this.$message.success(body.message);
                    } else {
                        this.$message.error(body.message);
                    }
                }).catch(() => {
                    this.$message.error('删除失败');
                })
            },
            deleteServer(id) {
                let params = {
                    id: id,
                };
                this.delete('/role/delete', params);
            },
            createServer(row) {
                console.log(row);
                console.log("createServer");
                this.messageVisible = true;
                this.operate = 'create';
                let _form = Object.assign({}, row);
                this.messageForm = _form;
            },
            updateUser(row) {
                console.log("updateUser");
                console.log(row);
                this.idtest = row.id;
                this.messageVisible = true;
                let _form = Object.assign({}, row);
                this.messageForm = _form;
            },
            saveServer() {
                console.log('save');
                let params = {
                    roleId: this.messageForm.roleId,
                    roleDesc: this.messageForm.roleDesc,
                    roleGroup: this.messageForm.roleGroup,
                };
                this.$refs['messageForm'].validate((valid) => {
                    if (this.messageForm.id) {
                        params.id = this.messageForm.id;
                        this.save('/role/update', params, 'messageVisible');
                    } else {
                        this.save('/role/create', params, 'messageVisible');
                    }
                })
            },

        }
    }
</script>

<style scoped>
    .main-login {
        height: 100%;
    }

    .danger-text {
        color: #F56C6C;
    }
</style>
